<%@ page language="java" contentType="text/html; charset=utf-8"%>
<!DOCTYPE html>
<html>
<head>
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/plugin/layui/css/layui.css" media="all">

</head>
<body>

<div class="clear box layer-main">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>基本树</legend>
    </fieldset>

    <div style="padding: 10px; border: 1px solid rgb(221, 221, 221); border-image: none; width: 300px; height: 500px; overflow: auto; float: left; display: inline-block;">
        <ul id="demo1"></ul>
    </div>

    <div class="layui-tab" lay-allowClose="true" style="float: left;margin-left: 20px;">
        <ul class="layui-tab-title">
            <li class="layui-this">网站设置</li>
            <li>基本管理</li>
            <li>权限分配</li>
            <li>商品管理</li>
            <li>订单管理</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">1</div>
            <div class="layui-tab-item">2</div>
            <div class="layui-tab-item">3</div>
            <div class="layui-tab-item">4</div>
            <div class="layui-tab-item">5</div>
            <div class="layui-tab-item">6</div>
        </div>
    </div>

</div>

<script type="text/javascript" src="/plugin/layui/layui.all.js"></script>
<script>
    //Demo
    layui.use(['tree', 'layer'], function(){
        var layer = layui.layer
            ,$ = layui.jquery;

        layui.tree({
            elem: '#demo1'
            ,target: '_blank'
            ,click: function(item){
//                layer.msg('当前节名称：'+ item.name + '<br>全部参数：'+ JSON.stringify(item));
                console.log(item);
                //tab层
                layer.tab({
                    area: ['600px', '300px'],
                    tab: [{
                        title: 'TAB1',
                        content: '内容1'
                    }, {
                        title: 'TAB2',
                        content: '内容2'
                    }, {
                        title: 'TAB3',
                        content: '内容3'
                    }]
                });
            }
            ,nodes: [ //节点
                {
                    name: '常用文件夹'
                    ,id: 1
                    ,alias: 'changyong'
                    ,children: [
                    {
                        name: '所有未读（设置跳转）'
                        ,id: 11
                        ,href: '#'
                        ,alias: 'weidu'
                    }, {
                        name: '置顶邮件'
                        ,id: 12
                    }, {
                        name: '标签邮件'
                        ,id: 13
                    }
                ]
                }, {
                    name: '我的邮箱'
                    ,id: 2
                    ,spread: true
                    ,children: [
                        {
                            name: 'QQ邮箱'
                            ,id: 21
                            ,class:11
                            ,spread: true
                            ,children: [
                            {
                                name: '收件箱'
                                ,id: 211
                                ,class:11
                                ,children: [
                                {
                                    name: '所有未读'
                                    ,id: 2111
                                }, {
                                    name: '置顶邮件'
                                    ,id: 2112
                                }, {
                                    name: '标签邮件'
                                    ,id: 2113
                                }
                            ]
                            }, {
                                name: '已发出的邮件'
                                ,id: 212
                            }, {
                                name: '垃圾邮件'
                                ,id: 213
                            }
                        ]
                        }, {
                            name: '阿里云邮'
                            ,id: 22
                            ,children: [
                                {
                                    name: '收件箱'
                                    ,id: 221
                                }, {
                                    name: '已发出的邮件'
                                    ,id: 222
                                }, {
                                    name: '垃圾邮件'
                                    ,id: 223
                                }
                            ]
                        }
                    ]
                }
                ,{
                    name: '收藏夹'
                    ,id: 3
                    ,alias: 'changyong'
                    ,children: [
                        {
                            name: '动作片'
                            ,id: 31
                            ,alias: 'love'
                        }, {
                            name: '技术栈'
                            ,id: 12
                            ,children: [
                                {
                                    name: '前端'
                                    ,id: 121
                                }
                                ,{
                                    name: '全端'
                                    ,id: 122
                                }
                            ]
                        }
                    ]
                }
            ]
        });

    });


</script>

</body>
</html>